<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多人聊天室</title>
    <style>
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .msg-list {
            position: relative;
            width: 600px;
            margin: 0 auto;
        }

        .msg-list ul {
            padding: 10px;
            min-height: 200px;
            max-height: 400px;
            overflow-y: auto;
            border: 1px solid #ddd;
        }

        .msg-list li {
            float: left;
            clear: both;
            margin: 10px 0;
            padding: 5px;
            line-height: 2;
            border-radius: 5px;
            background-color: #efefef;
        }

        .msg-list li h4 {
            margin: 0;
            margin-bottom: 10px
        }

        .msg-list li.active {
            float: right;
            background-color: #58bc58;
            color: #fff;
        }

        .msg-list textarea {
            display: block;
            min-height: 50px;
            margin: 10px 0;
            width: 100%;
            box-sizing: border-box;
        }

        .status {
            display: none;
            position: absolute;
            left: 50px;
            bottom: 0;
            right: 0;
            padding: 5px 10px;
            text-align: center;
            color: #999;
        }

        .login {
            text-align: right;
        }
    </style>
</head>

<body>
    <h1>多人聊天室</h1>
    <div id="autoAnswer" class="msg-list">
        <div class="login"><input type="text" name="username" id="username"><button class="btn-login">进入</button><button
                class="btn-logout">退出</a></div>
        <ul>
            <!-- <li>约吗</li>
            <li class="active">滚</li> -->
        </ul>
        <textarea></textarea>
        <button class="btn-send">提交</button>
        <div class="status"></div>
    </div>

</body>
<script>
    (() => {
        /**
			 * 客户端Socket
			    * HTML5新特性：WebSocket
            
                前后端协商数据格式:{data,status}
                
				status:
					0:退出登录
					1:登录成功
					2:发送消息
				data:{username,content,time}
			 */
        let autoAnswer = document.querySelector('#autoAnswer');
        let login = autoAnswer.querySelector('.login');
        let username = login.children[0];
        let btnLogin = login.children[1];
        let btnLogout = login.children[2];

        let msglist = autoAnswer.querySelector('ul');
        let msg = autoAnswer.querySelector('textarea');
        let btnSend = autoAnswer.querySelector('.btn-send');
        let status = autoAnswer.querySelector('.status');


        function data(opt) {
            return JSON.stringify(opt);
        }

        let socket = null;
        let contentList = [];//用于存储所有的聊天数据


        function init() {
            //渲染数据到页面
            let str = contentList.map(item => {
                return `<li ${item.username === username.value ? 'class="active"' : ''}>
                                <h4>${item.username}：</h4>
                                <div>${item.content}</div>
                                <time>${new Date(item.time).toLocaleString()}</time>
                        </li>`
            }).join('');
            msglist.innerHTML = str;
        }

        //输入用户名，点击进入聊天室
        btnLogin.onclick = function() {
            let name = username.value;
            if(name.trim()) {
                socket = new WebSocket('ws://localhost:2089');//1.连接ws服务器
            }
            


            //监听是否连接成功:如果连接成功就触发这里
            socket.onopen = function() {
                console.log('客户端已经成功连接服务器');
                username.disabled = true;//输入框不可点
                let str = data({
                    username : name, //用户名
                    type : 1,//1 代表登录成功
                    time : new Date(),//登录时间
                    content : '我来了' //备注
                })
                socket.send(str);
            }

            //监听：服务器发过来的信息
            socket.onmessage = function(ev) {
                console.log(ev.data);//服务器广播的消息在这里
                let data = JSON.parse(ev.data);

                //登录的时候
                if(data.type == 1) {
                    status.style.display = 'block';
                    status.innerHTML = data.username + '进入聊天室';
                    setTimeout(() => {//5秒后隐藏提示框
                        status.style.display = 'none';
                    },5000);
                }

                //退出的时候
                if(data.type == 0) {
                    status.style.display = 'block';
                    status.innerHTML = data.username + '退出聊天室';
                    setTimeout(() => {//5秒后隐藏提示框
                        status.style.display = 'none';
                    },5000);
                    username.disabled = false;
                    username.value = '';
                }

                //发信息的时候
                if(data.type == 2) {
                    contentList.push(data);//[{}]
                    init();//渲染数据到聊天窗口
                }
            }


        }


        //点击发送消息
        function send(msgstr) {
            if(msgstr.trim) {
                //发送消息
                let str = data({
                    username : username.value, //用户名
                    type : 2,//2 代表发送消息
                    time : new Date(),//发消息时间
                    content : msgstr //要发送的消息
                })
                socket.send(str);//发送这条聊天的内容给服务器端
                msg.value = '';//清空表单
                msg.focus();//聚焦
            }
        }

        //点击发送消息
        btnSend.onclick = function() {
            let msgstr = msg.value;
            send(msgstr);
        
        }

        //回车发送消息
        msg.onkeyup = function(ev) {
            if(ev.keyCode == 13) {
                let msgstr = msg.value;
                send(msgstr);
            }
        }

        //点击退出
        btnLogout.onclick = function() {
            let str = data({
                    username : username.value, //用户名
                    type : 0,//0 代表退出聊天室
                    time : new Date(),//退出时间
                    content : '我走啦' //要发送的消息
                })
                socket.send(str);//发送这条聊天的内容给服务器端
                socket.close();//关闭ws连接
        }

    })();
</script>

</html>